<template>
  <div class="left">
    <div class="avatar">
      <ltAvatar
        :size="50"
        :src="songInfo?.picUrl"
        alt="歌曲封面"
        @click="changeAvatarHandler"
      ></ltAvatar>
    </div>
    <!-- 歌名作者 -->
    <div class="song_info">
      <p class="song_name">{{ songInfo.name }}</p>
      <p>{{ songInfo.songNmae }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

import ltAvatar from '@renderer/base-ui/lt-avatar/index.vue'
import usePlay from '@renderer/pinia/modules/play'

const emit = defineEmits(['changeAvatar'])

const playStore = usePlay()

const songInfo = ref<any>({
  id: 0,
  name: '-----',
  picUrl: 'http://p1.music.126.net/o9waVgbnSHG-Gq0bDe5_8A==/109951170257936438.jpg',
  songNmae: '-----'
})

watch(
  () => playStore.currentAudio,
  (newVal) => {
    if (newVal) {
      songInfo.value = newVal
    }
  },
  {
    deep: true
  }
)

// 点击了歌曲封面
const changeAvatarHandler = () => {
  emit('changeAvatar')
}
</script>

<style scoped lang="scss">
.left {
  display: flex;
  .song_info {
    margin-left: 10px;
    .song_name {
      width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
